<template>
  <div>
    <div class="fixed">
      <!-- 表头 -->
      <div class="heae">
        <div class="iconfont icon-left jt" @click="topFn"></div>
        <div class="kuan" @click="tiaoFn">
          <div class="hz">
            <i class="iconfont icon-search"></i>
            查找你喜欢的商品
          </div>
        </div>
        <div class="right-classifys">
          <img src="../assets/fenlei.png" alt />
        </div>
      </div>
      <div class="filterbar">
        <div class="filter-bar">
          <ul class="uis">
            <li>
              <div>
                <span class="zonghe">综合</span>
                <span class="BJT"></span>
              </div>
            </li>
            <li>
              <div>
                <span class="items">销量</span>
              </div>
            </li>
            <li>
              <div>
                <span class="items">价格</span>
                <span class="shangxia"></span>
              </div>
            </li>
            <li>
              <div>
                <span class="items">筛选</span>
                <span class="SX"></span>
              </div>
            </li>
          </ul>
        </div>
        <div class="peisong">
          <div class="bailian">
            <ul class="uic">
              <li class="lis">
                <span>百联配送</span>
              </li>
              <li class="lis">
                <span>品牌</span>
              </li>
              <li class="lis">
                <span>自提</span>
              </li>
              <li class="lis">
                <span>促销</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="content-one">
        <div class="content-two">
          <ul class="ust">
            <li class="lst" @click="detailsFn">
              <div class="tup">
                <img src="../assets/baoshi.jpg" alt />
              </div>
              <div class="jieshao">
                <div class="right-inner">
                  <p class="kuajing">
                    <span>跨境</span>
                    Kiehls 科颜氏 高保湿面霜 125ml
                  </p>
                  <p class="kuajings">&nbsp;</p>
                  <div class="zhekou">
                    <span>[满1件享8.50折]</span>
                    <span>[拼团]</span>
                  </div>
                  <div class="price-cart">
                    <div class="price-son">￥435.0</div>
                    <div class="liked">
                      <div class="flex-m">
                        <span class="common-icon"></span>
                        <span class="common-num">117</span>
                      </div>
                      <div class="flex-m">
                        <span class="zan-icon"></span>
                        <span class="common-num">100%</span>
                      </div>
                    </div>
                    <div class="iconf">
                      <span></span>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {
    //跳转搜索页面
    tiaoFn() {
      this.$router.push("/detial");
    },
    //跳转上一层一面
    topFn() {
      this.$router.push("/classify");
    },
    //详情
    detailsFn(){
        this.$router.push('/xiangqing')
    }
  }
};
</script>

<style scoped>
.iconf {
  width: 0.45rem;
  height: 0.45rem;
  line-height: 0.45rem;
  border: 1px solid #e7e7e7;
  border-radius: 50%;
  text-align: center;
  right: 0;
  bottom: 0;
}
.iconf span {
  background: url("../assets/cart.png") no-repeat;
  display: inline-block;
  width: 0.25rem;
  height: 0.25rem;
  background-size: contain;
}
.zan-icon {
  background: url("../assets/dz.png") no-repeat;
  width: 0.18rem;
  height: 0.18rem;
  background-size: contain;
  margin-right: 0.1rem;
  display: inline-block;
}
.kuajings {
  margin-bottom: 0.5rem;
}
.flex-m {
  display: flex;
  align-items: center;
  margin-right: 0.25rem;
}
.liked {
  display: flex;
  align-items: center;
}
.common-num {
  font-size: 0.2rem;
  color: #999999;
}
.common-icon {
  background: url("../assets/pl.png") no-repeat;
  width: 0.18rem;
  height: 0.18rem;
  background-size: contain;
  margin-right: 0.1rem;
  display: inline-block;
}
.price-son {
  font-size: 0.27rem;
  color: #ff6f6f;
  margin-right: 0.5rem;
}
.price-cart {
  position: relative;
  display: flex;
  align-items: center;
}
.zhekou span {
  font-style: normal;
  border-radius: 0.03rem;
}
.zhekou {
  margin-bottom: 0.12rem;
  font-size: 0.2rem;
  color: #ff6f6f;
}
.kuajing span {
  font-style: normal;
  color: #ff4a4a;
  padding: 0 0.06rem;
  height: 0.28rem;
  font-size: 0.2rem;
  color: #ff4a4a;
  text-align: center;
  border: 1px solid #ffbdbd;
  border-radius: 0.04rem;
}
.kuajing {
  text-overflow: ellipsis;
  word-break: break-all;
  overflow: hidden;
  font-size: 0.23rem;
  color: #333333;
  margin-bottom: 0.3rem;
}
p {
  margin: 0;
  padding: 0;
}
.tup img {
  width: 100%;
}
.lst .tup {
  width: 2.2rem;
  margin-right: 0.2rem;
}
.ust .lst {
  display: flex;
  background: #fff;
  border-bottom: 1px solid #e7e7e7;
  padding: 0.4rem 0.2rem 0.2rem 0.3rem;
}
.content-two {
  width: 100%;
}
.content {
  padding-top: 2.1rem;
}
.fixed {
  position: fixed;
}
.peisong {
  width: 100%;
  background: #fff;
  z-index: 2;
}
.uic {
  display: flex;
}
.uic .lis {
  margin-top: 0.2rem;
  padding-bottom: 0.08rem;
  font-size: 0.2rem;
  color: #777777;
  border-bottom: solid 1px #ededed;
  padding-right: 0.1rem;
  padding-left: 0.16rem;
}
.lis span {
  display: inline-block;
  width: 1.3rem !important;
  line-height: 0.35rem;
  height: 0.35rem;
  text-align: center;
  background: #f6f6f6;
  border: 1px solid transparent;
  border-radius: 8px;
}
.SX {
  background: url("../assets/xiaoliang.png") no-repeat;
  background-position: center center;
  display: inline-block;
  margin-left: 0.08rem;
  width: 0.16rem;
  height: 0.44rem;
  background-size: 100%;
}
.shangxia {
  background: url("../assets/shangxia.png") no-repeat;
  background-position: center center;
  display: inline-block;
  margin-left: 0.08rem;
  width: 0.12rem;
  height: 0.44rem;
  background-size: 100%;
}
.items {
  color: #999;
}
.filterbar {
  /* padding: 0 0.2rem; */
}
.uis {
  display: flex;
  justify-content: space-around;
  flex: 1;
}
.zonghe {
  color: #e6133c;
}
.BJT {
  background: url("../assets/xz.png") no-repeat;
  background-position: center center;
  display: inline-block;
  margin-left: 0.08rem;
  width: 0.12rem;
  height: 0.44rem;
  background-size: 100%;
}
.filter-bar ul li div {
  display: flex;
  align-items: center;
}
.filter-bar ul li {
  height: 0.7rem;
  line-height: 0.7rem;
  font-size: 0.24rem;
  color: #777777;
}
.filter-bar {
  width: 100%;
  background: #fff;
  position: relative;
  border-bottom: solid 1px #ededed;
  border-top: solid 1px #ededed;
  z-index: 2;
  /* padding: 0 0.2rem; */
}
.right-classifys img {
  width: 0.34rem;
  height: 0.34rem;
}
.right-classifys {
  height: 0.5rem;
  line-height: 0.7rem;
}
.jt {
  font-size: 0.4rem;
  color: #848689;
}
.kuan {
  display: flex;
  align-items: center;
}
.hz {
  color: #999;
  font-size: 0.2rem;
  height: 0.3rem;
}
.heae {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 0.7rem;
  padding: 0 0.2rem;
}
.kuan {
  background: #f6f6f6;
  padding: 0.1rem 0.1rem;
  width: 4.5rem;
  border-radius: 5px;
}
.kuan i {
  color: #a1a1a1;
  font-size: 0.3rem;
  vertical-align: middle;
}
</style>